<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TY Player</title>

    <script src="static/js/vue.min.js"></script>
    <link rel="stylesheet" href="./node_modules/element-ui/lib/theme-chalk/index.css">
    <script src="./node_modules/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="static/css/mysite.css">
    <link rel="stylesheet" href="static/css/video-js.min.css">
</head>

<body>
    <div id="app">
        <div class="main">

            <!-- 左边导航 -->
            <div class="left">
                <span class="ty-svg" id="view" @click="leftViewImgClick" @mouseover="viewMouseOver"
                    @mouseleave="viewMouseLeave" :style="viewActiveStyle">
                    <!-- <img src="./static/images/光圈-紫.png"> -->
                    <img :src="leftViewImg">
                </span>
                <span class="ty-svg" id="player" @click="leftPlayerImgClick" @mouseover="playerMouseOver"
                    @mouseleave="playerMouseLeave" :style="playerActiveStyle">
                    <!-- <img src="./static/images/播放.png"> -->
                    <img :src="leftPlayerImg">
                </span>
                <span class="ty-svg" id="collect" @click="leftCollectImgClick" @mouseover="collectMouseOver"
                    @mouseleave="collectMouseLeave" :style="collectActiveStyle">
                    <!-- <img src="./static/images/收藏.png"> -->
                    <img :src="leftCollectImg">
                </span>

            </div>

            <!-- 右边内容 -->
            <div class="right">
                <!-- 顶部筛选 -->
                <el-card class="top" shadow="always" v-if="topIsShow">
                    <!-- 筛选表单 -->
                    <el-form :inline="true" :model="screeningForm">
                        <!-- 站点选择 -->
                        <el-form-item style="margin-left: 10px;">
                            <el-select v-model="screeningForm.station" placeholder="最大资源网" @change="stationSelectChang">
                                <el-option v-for="item in stationOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 大分类 -->
                        <el-form-item>
                            <el-select v-model="screeningForm.category" placeholder="最新" @change="categorySelectChang">
                                <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 子分类 -->
                        <el-form-item id="subCategory">
                            <el-select v-model="screeningForm.subCategory" :disabled="subCategoryIsable"
                                placeholder="全部" @change="subCategorySelectChang">
                                <el-option v-for="item in subCategoryOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <!-- 搜索框 -->
                        <el-form-item>
                            <el-input placeholder="请输入关键字" suffix-icon="el-icon-search"
                                v-model="screeningForm.searchTxt" @keyup.enter.native="search()">
                            </el-input>
                        </el-form-item>

                    </el-form>
                </el-card>


                <el-card shadow="always" class="video-list" v-if="videoListIsShow">
                    <!-- 视频列表 -->
                    <div class="video-list-view">
                        <el-table :data="indexTableData" highlight-current-row="true" id="video-table" class="video-table">
                            <el-table-column prop="name" label="名称" width="400px">
                            </el-table-column>
                            <el-table-column prop="type" label="类型" width="80px">
                            </el-table-column>
                            <el-table-column prop="updateTime" label="时间">
                            </el-table-column>
                            <el-table-column prop="link" label="链接" v-if="false">
                            </el-table-column>
                            <el-table-column prop="address" label="操作">
                                <template slot-scope="scope">
                                    <el-button @click="handleDetail(scope.row)" type="text" size="small">详情</el-button>
                                    <el-button @click="handleCollect(scope.row)" type="text" size="small"
                                        style="color: #ff9800;">收藏</el-button>
                                </template>
                            </el-table-column>
                            </el-table-column>
                        </el-table>
                        <!-- 分页 -->
                        <el-pagination small layout="prev, pager, next" :page-size="50" :total="sumNumber"
                            :current-page="cunrrentPage" @current-change="handleCurrentChange">
                        </el-pagination>
                    </div>

                </el-card>

                <!-- 视频播放器 -->
                <div id="video-player" v-show="playerIsShow">
                    <div style="width: 100%;height: 100%;margin-top: 10px;">
                        <div style="height: 100%;">
                            <div>
                                <h4 id="play-tiltle" style="display: inline;color: mediumpurple;">『第一集』</h4>
                                <span style="float: right;padding: 2px 5px;" @click.prevent="playerShowDetail()">详情<i
                                        id="show-detail" class="el-icon-upload2"
                                        style="cursor: pointer;color: red;"></i></span>
                            </div>
                            <section id="videoPlayer" style="height:96%;margin: 10px auto;">
                                <video id="myvideo" class="video-js vjs-default-skin vjs-big-play-centered" controls
                                    autoplay preload style="width:100%;height: 98%;">
                                    <source src="" type="application/x-mpegURL" id="source-target">
                                    <!-- <source src="" type="application/x-mpegURL" id="source-target"> -->
                                </video>
                            </section>
                        </div>
                    </div>

                </div>


                <!-- 收藏 -->
                <div class="video-collect" v-show="collectIsShow">
                    <el-table :data="collectTableData" style="width: 100%">
                        <el-table-column prop="name" label="名称">
                        </el-table-column>
                        <el-table-column prop="type" label="类型">
                        </el-table-column>
                        <el-table-column prop="station" label="时间">
                        </el-table-column>
                        <el-table-column prop="link" label="链接" v-if="false">
                        </el-table-column>
                        <el-table-column prop="handel" label="操作">
                            <template slot-scope="scope">
                                <el-button @click="handleDetail(scope.row)" type="text" size="small">详情</el-button>
                                <el-button @click="handleDelete(scope.row)" type="text" size="small"
                                    style="color: red;">删除</el-button>
                            </template>
                        </el-table-column>
                        </el-table-column>
                    </el-table>

                </div>

            </div>

            <!-- 详情页 -->
            <div id="video-detail" v-if="detailIsShow">
                <div style="padding-left: 60px;width: 95%;">
                    <div class="detail-header">
                        <span>详情</span>
                        <span style="float: right;margin-right: 10px;">
                            <i id="detail-close" @click="detailClose()" class="el-icon-close"
                                style="color: red;cursor: pointer;"></i>
                        </span>
                    </div>

                    <div class="detail-body" style="height: 650;overflow: auto;">

                        <div v-html="videoSummary"
                            style="border: 1px solid;border-color: rgba(130, 58, 160, 0.13);border-radius: 2px;min-height: 360px;">
                            <!-- {{videoSummary}} -->
                        </div>
                        <div class="detail-playlist"
                            style="border: 1px solid;border-color: rgba(130, 58, 160, 0.13);border-radius: 2px;padding: 10px 5px;">
                            <span style="padding-left: 10px;">播放</span>
                            <div style="padding: 5px;">
                                <a v-for="play in videoPlayList" :href="play.address"
                                    @click.prevent="playVideo(play.address,play.episode)">
                                    <el-tag type="success" effect="plain" size="medium" style="margin: 5px;">
                                        {{play.episode}}
                                    </el-tag>
                                </a>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>






    <script>
        const axios = require("axios");
        const cheerio = require("cheerio");
        const fs = require("fs");


        new Vue({
            el: '#app',
            data: function () {
                return {
                    viewActiveStyle: '',    //鼠标移入移出样式
                    playerActiveStyle: '',  //鼠标移入移出样式
                    collectActiveStyle: '', //鼠标移入移出样式
                    leftViewImg: "./static/images/光圈-紫.png",
                    leftPlayerImg: "./static/images/播放.png",
                    leftCollectImg: "./static/images/收藏.png",
                    sumNumber: 0,   //总条数
                    cunrrentPage: 1,    //当前页
                    totalPage: 0,   //总页数
                    // 筛选表单
                    screeningForm: {
                        station: 'http://zuidazy4.com',
                        category: '最新',
                        subCategory: '国产剧',
                        searchTxt: ''
                    },
                    subCategoryIsable: true,    //子分类是否禁用
                    // 资源站选项
                    stationOptions: [{
                        value: 'http://zuidazy4.com',
                        label: '最大资源网'
                    }, {
                        value: 'http://okzyw.com',
                        label: 'OK资源站'
                    }, {
                        value: 'http://www.123ku.com',
                        label: '123资源站'
                    }],
                    turnPageStr: "/?m=vod-index-pg-",   //默认(首页)翻页字符串
                    // 分类选项
                    categoryOptions: [{
                        value: '最新',
                        label: '最新'
                    }, {
                        value: '电视剧',
                        label: '电视剧'
                    }, {
                        value: '电影',
                        label: '电影'
                    }, {
                        value: '动漫',
                        label: '动漫'
                    }],

                    // 电视剧的子分类选项
                    TVOpt: [{
                        value: '国产剧',
                        label: '国产剧'
                    }, {
                        value: '香港剧',
                        label: '香港剧'
                    }, {
                        value: '韩国剧',
                        label: '韩国剧'
                    }, {
                        value: '台湾剧',
                        label: '台湾剧'
                    }, {
                        value: '日本剧',
                        label: '日本剧'
                    }],
                    // 电影的子分类选项
                    MovieOpt: [{
                        value: '动作片',
                        label: '动作片'
                    }, {
                        value: '喜剧片',
                        label: '喜剧片'
                    }, {
                        value: '科幻片',
                        label: '科幻片'
                    }, {
                        value: '恐怖片',
                        label: '恐怖片'
                    }, {
                        value: '剧情片',
                        label: '剧情片'
                    }],
                    // 子分类选项
                    subCategoryOptions: this.TVOpt,

                    topIsShow: true,    //顶部栏是否显示
                    videoListIsShow: true,  //视频列表是否显示

                    // 首页表格数据
                    indexTableData: [],

                    videoTitle: '', //播放的视频标题
                    videoSummary: null,     //视详情页简介html
                    videoPlayList: [],  //详情页播放列表
                    detailIsShow: false,    //详情页是否显示

                    playerIsShow: false,    //播放器是否显示

                    videoSearchStr: '', //搜索网址前部分

                    collectIsShow: false,   //收藏是否显示
                    // 收藏表格数据
                    collectTableData: null,



                }
            },
            created: function () {
                
            },
            mounted: function () {
                // 调用方法获取首页数据
                this.indexTableData = this.getIndexData(this.screeningForm.station);
                this.readCollect();
            },
            methods: {
                // 鼠标移入
                viewMouseOver() {
                    this.viewActiveStyle = "background-color:#e5e5fb";
                },
                // 鼠标移出
                viewMouseLeave() {
                    this.viewActiveStyle = "";
                },
                playerMouseOver() {
                    this.playerActiveStyle = "background-color:#e5e5fb";
                },
                playerMouseLeave() {
                    this.playerActiveStyle = "";
                },
                collectMouseOver() {
                    this.collectActiveStyle = "background-color:#e5e5fb";
                },
                collectMouseLeave() {
                    this.collectActiveStyle = "";
                },
                // 浏览导航点击
                leftViewImgClick() {
                    this.leftViewImg = "./static/images/光圈-紫.png";
                    this.leftPlayerImg = "./static/images/播放.png";
                    this.leftCollectImg = "./static/images/收藏.png";
                    
                    this.playerIsShow = false;
                    this.collectIsShow = false;
                    this.topIsShow = true;
                    this.videoListIsShow = true;
                },
                // 播放导航点击
                leftPlayerImgClick() {
                    this.leftViewImg = "./static/images/光圈.png";
                    this.leftPlayerImg = "./static/images/播放-紫.png";
                    this.leftCollectImg = "./static/images/收藏.png";

                    this.topIsShow = false;
                    this.videoListIsShow = false;
                    this.collectIsShow = false;
                    this.playerIsShow = true;
                },
                // 收藏导航点击
                leftCollectImgClick() {
                    this.leftViewImg = "./static/images/光圈.png";
                    this.leftPlayerImg = "./static/images/播放.png";
                    this.leftCollectImg = "./static/images/收藏-紫.png";
                    
                    this.playerIsShow = false;
                    this.topIsShow = false;
                    this.videoListIsShow = false;
                    this.collectIsShow = true;
                },
                //获取首页数据
                getIndexData(url) {
                    // var that = this;
                    var videos = [];
                    axios.get(url).then(resp => {
                        var $ = cheerio.load(resp.data);
                        var list = $("div.xing_vb ul li");

                        for (let i = 1; i < list.length - 1; i++) {
                            var li = $(list[i]);

                            var video = {
                                name: li.find("span.xing_vb4 a").text(),    //视频名称
                                link: (this.screeningForm.station + li.find("span.xing_vb4 a").attr("href")),  //视频链接
                                type: li.find("span.xing_vb5").text(),    //视频类型
                                updateTime: (li.find("span.xing_vb6").text() == "" ? li.find("span.xing_vb7").text() : li.find("span.xing_vb6").text())
                            };

                            videos.push(video); //添加video对象到列表
                        }

                        var pageInfo = $("div.pages").text();
                        var reg = /共(\d+)条数据.*?当前:(\d+)\/(\d+)页/;
                        var page = reg.exec(pageInfo);
                        this.sumNumber = parseInt(page[1]);  //总条数
                        this.cunrrentPage = page[2];    //当前页
                        this.totalPage = page[3];   //总页数
                    });
                    // console.log("videos==",videos);
                    return videos;
                },
                // 站点选择
                stationSelectChang(val) {
                    console.log("站点==", val);
                    this.screeningForm.category = "最新";
                    this.cunrrentPage = 1;
                    switch (val) {
                        case "http://zuidazy4.com":
                            this.indexTableData = this.getIndexData(val);
                            break;
                        case "http://okzyw.com":
                            this.indexTableData = this.getIndexData(val);
                            break;
                        case "http://www.123ku.com":
                            this.indexTableData = this.getIndexData(val);
                            break;

                        default:
                            this.indexTableData = this.getIndexData("http://zuidazy4.com");
                            break;
                    }
                },
                // 分类选择
                categorySelectChang(val) {
                    console.log("分类value==", val);
                    this.cunrrentPage = 1;
                    switch (val) {
                        case "最新":
                            this.subCategoryIsable = true;
                            this.indexTableData = this.getIndexData(this.screeningForm.station);
                            break;
                        case "电视剧":
                            this.subCategoryIsable = false;
                            this.screeningForm.subCategory = "全部";
                            this.subCategoryOptions = this.TVOpt,
                            this.indexTableData = this.getIndexData(this.screeningForm.station + "/?m=vod-type-id-2.html");
                            this.turnPageStr = "/?m=vod-type-id-2-pg-";
                            break;
                        case "电影":
                            this.subCategoryIsable = false;
                            this.screeningForm.subCategory = "全部";
                            this.subCategoryOptions = this.MovieOpt,
                            this.indexTableData = this.getIndexData(this.screeningForm.station + "/?m=vod-type-id-1.html");
                            this.turnPageStr = "/?m=vod-type-id-1-pg-";
                            break;
                        case "动漫":
                            this.subCategoryIsable = true;
                            this.indexTableData = this.getIndexData(this.screeningForm.station + "/?m=vod-type-id-4.html");
                            this.turnPageStr = "/?m=vod-type-id-4-pg-";
                            break;
                        default:
                            break;
                    }
                },
                // 子分类选择
                subCategorySelectChang(val) {
                    console.log("子分类==", val);
                    this.cunrrentPage = 1;
                    switch (val) {
                        case "国产剧":
                            this.indexTableData = this.getIndexData(this.screeningForm.station + "/?m=vod-type-id-12.html");
                            this.turnPageStr = "/?m=vod-type-id-12-pg-";
                            break;
                        case "香港剧":
                            this.indexTableData = this.getIndexData(this.screeningForm.station + "/?m=vod-type-id-13.html");
                            this.turnPageStr = "/?m=vod-type-id-13-pg-";
                            break;
                        case "韩国剧":
                            this.indexTableData = this.getIndexData(this.screeningForm.station + "/?m=vod-type-id-14.html");
                            this.turnPageStr = "/?m=vod-type-id-14-pg-";
                            break;
                        case "台湾剧":

                            switch (this.screeningForm.station) {
                                case "http://zuidazy4.com":    //最大资源网
                                    this.indexTableData = this.getIndexData(this.screeningForm.station + "/?m=vod-type-id-19.html");
                                    this.turnPageStr = "/?m=vod-type-id-19-pg-";
                                    break;
                                case "http://okzyw.com":    //ok资源网
                                    this.indexTableData = this.getIndexData(this.screeningForm.station + "/?m=vod-type-id-16.html");
                                    this.turnPageStr = "/?m=vod-type-id-16-pg-";
                                    break;
                                case "http://www.123ku.com":    //123资源网
                                    this.indexTableData = this.getIndexData(this.screeningForm.station + "/?m=vod-type-id-18.html");
                                    this.turnPageStr = "/?m=vod-type-id-18-pg-";
                                    break;
                            }
                            break;

                        case "日本剧":
                            switch (this.screeningForm.station) {
                                case "http://zuidazy4.com":    //最大资源网
                                    this.indexTableData = this.getIndexData(this.screeningForm.station + "/?m=vod-type-id-20.html");
                                    this.turnPageStr = "/?m=vod-type-id-20-pg-";
                                    break;
                                case "http://okzyw.com":    //ok资源网
                                    this.indexTableData = this.getIndexData(this.screeningForm.station + "/?m=vod-type-id-17.html");
                                    this.turnPageStr = "/?m=vod-type-id-17-pg-";
                                    break;
                                case "http://www.123ku.com":    //123资源网
                                    this.indexTableData = this.getIndexData(this.screeningForm.station + "/?m=vod-type-id-19.html");
                                    this.turnPageStr = "/?m=vod-type-id-19-pg-";
                                    break;
                            }
                            break;
                            
                        case "动作片":
                            this.indexTableData = this.getIndexData(this.screeningForm.station + "/?m=vod-type-id-5.html");
                            this.turnPageStr = "/?m=vod-type-id-5-pg-";
                            break;
                        case "喜剧片":
                            this.indexTableData = this.getIndexData(this.screeningForm.station + "/?m=vod-type-id-6.html");
                            this.turnPageStr = "/?m=vod-type-id-6-pg-";
                            break;
                        case "科幻片":
                            this.indexTableData = this.getIndexData(this.screeningForm.station + "/?m=vod-type-id-8.html");
                            this.turnPageStr = "/?m=vod-type-id-8-pg-";
                            break;
                        case "恐怖片":
                            this.indexTableData = this.getIndexData(this.screeningForm.station + "/?m=vod-type-id-9.html");
                            this.turnPageStr = "/?m=vod-type-id-9-pg-";
                            break;
                        case "剧情片":
                            this.indexTableData = this.getIndexData(this.screeningForm.station + "/?m=vod-type-id-10.html");
                            this.turnPageStr = "/?m=vod-type-id-10-pg-";
                            break;
                        default:
                            break;
                    }
                },

                // 详情按钮点击
                handleDetail(obj) {
                    console.log("详情obj==", obj);
                    // this.topIsShow = false;
                    // this.videoListIsShow = false;
                    // this.collectIsShow = false;

                    axios.get(obj.link).then(resp => {
                        var $ = cheerio.load(resp.data, { decodeEntities: false });

                        var title = $("div.vodh h2").text();
                        var summary = $("div.vodBox").html();

                        switch (this.screeningForm.station) {
                            case "http://zuidazy4.com":    //最大资源网
                                var list = $("div#play_1 li");
                                break;
                            case "http://www.123ku.com":    //123资源站
                                var list = $("div#play_1 li");
                                break;
                            case "http://okzyw.com":    //ok资源网
                                var list = $("div#2 li");
                                break;
                            default:
                                var list = $("div#play_1 li");
                                break;
                        }


                        var playList = [];
                        for (let i = 0; i < list.length; i++) {
                            var a = $(list[i]);
                            var play = {
                                episode: a.text().split("$")[0],
                                address: a.text().split("$")[1]
                            };
                            playList.push(play);

                        }

                        this.videoTitle = title;
                        this.videoSummary = summary;
                        this.videoPlayList = playList;
                        this.detailIsShow = true;
                    });
                },
                // 关闭详情
                detailClose() {
                    this.detailIsShow = false;
                },
                // 视频播放页调用详情
                playerShowDetail() {
                    this.topIsShow = false;
                    this.videoListIsShow = false;
                    this.collectIsShow = false;
                    this.detailIsShow = true;
                },
                //播放视频
                playVideo(playurl, episode) {
                    console.log("播放链接为：", playurl)
                    this.detailIsShow = false;
                    this.topIsShow = false;
                    this.videoListIsShow = false;
                    this.collectIsShow = false;
                    this.playerIsShow = true;
                    // 获取播放器对象
                    var player = videojs('myvideo');
                    player.ended();
                    player.src(playurl);    //设置播放地址
                    // player.load();
                    player.play();  //开始播放
                    //设置播放标题
                    document.getElementById("play-tiltle").innerText = ("『" + episode + "』 " + this.videoTitle);
                    //切换导航到播放器
                    document.getElementById("player").click();
                },

                // 页码点击翻页
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    var url = this.screeningForm.station + this.turnPageStr + `${val}.html`;
                    console.log(url);
                    this.indexTableData = this.getIndexData(url);
                    this.cunrrentPage = 1;
                },
                // 搜索
                search() {
                    var searchTxt = this.screeningForm.searchTxt;
                    console.log("searchTxt==", searchTxt);
                    var encodeKeywords = encodeURIComponent(searchTxt); //url编码
                    // 根据站点选择搜索网址
                    switch (this.screeningForm.station) {
                        case "http://zuidazy4.com":
                            this.videoSearchStr = "http://zuidazy4.com/index.php?m=vod-search&wd="
                            break;
                        case "http://okzyw.com":
                            this.videoSearchStr = "http://okzyw.com/index.php?m=vod-search&wd="
                            break;
                        case "http://www.123ku.com":
                            this.videoSearchStr = "http://cj.123ku2.com:12315/index.php?m=vod-search&wd="
                            break;
                        default:
                            break;
                    }
                    this.indexTableData = this.getIndexData((this.videoSearchStr + encodeKeywords));
                },


                // 添加收藏
                handleCollect(obj) {
                    var indexOf = obj.name.indexOf("更新");
                    switch (true) {
                        case indexOf > 0:
                            var name = obj.name.substring(0, indexOf);
                            break;
                        case indexOf <= 0:
                            var name = obj.name;
                            break;

                        default:
                            var name = obj.name;
                            break;
                    }

                    var type = obj.type;
                    switch (this.screeningForm.station) {
                        case "http://zuidazy4.com":
                            var station = "最大资源网";
                            break;
                        case "http://okzyw.com":
                            var station = "OK资源网";
                            break;
                        case "http://www.123ku.com":
                            var station = "123资源站";
                            break;

                        default:
                            var station = "未知";
                            break;
                    }

                    var link = obj.link;
                    var data = (name + "#" + type + "#" + station + "#" + link + "\n");
                    fs.appendFileSync("collect-list.data", data, function (err) {
                        if (err) {
                            console.log('写入失败')
                        } else {
                            console.log('写入成功了')
                        }
                    });
                    this.collectTableData = null;
                    this.readCollect();
                },

                // 读取收藏
                readCollect() {
                    console.log("读取收藏文件：");
                    var data = fs.readFileSync("collect-list.data", "utf-8").toString();
                    console.log("收藏数据：", data);
                    var arr = data.split("\n");
                    var collectObjs = [];
                    for (let i = 0; i < arr.length - 1; i++) {
                        var a = arr[i];     //一行
                        var b = a.split("#");   //分割一行

                        var c = {
                            name: b[0],
                            type: b[1],
                            station: b[2],
                            link: b[3]
                        }
                        collectObjs.push(c);
                    }
                    this.collectTableData = collectObjs;
                },

                // 删除收藏
                handleDelete(obj) {
                    var txt = (obj.name + "#" + obj.type + "#" + obj.station + "#" + obj.link + "\n");
                    console.log("删除收藏时txt为：", txt);
                    var data = fs.readFileSync("collect-list.data", "utf-8").toString();
                    data = data.replace(txt, "");
                    fs.writeFileSync("collect-list.data", data, function (err) {
                        if (err) {
                            console.log('删除收藏回写入失败')
                        } else {
                            console.log('删除收藏回写入成功')
                        }
                    });
                    this.collectTableData = null;
                    this.readCollect();
                },

            },
        })
    </script>


    <script src="static/js/video.min.js"></script>

    <!-- 视频播放器相关代码 -->
    <script type="text/javascript">
        var player = videojs('myvideo', { "poster": "", "controls": "true" }, function () {
            this.on('play', function () {
                // $(".vjs-control-bar").css("opacity",0);
                document.querySelector(".vjs-control-bar").style.opacity = 0;
                console.log('正在播放');

            });
            //暂停--播放完毕后也会暂停
            this.on('pause', function () {
                // $(".vjs-control-bar").css("opacity",1);
                document.querySelector(".vjs-control-bar").style.opacity = 1;
                console.log("暂停中")
            });
            // 结束
            this.on('ended', function () {
                console.log('结束');
            });

        });


    </script>

    <!-- 窗口大小改变相关代码 -->
    <script>
        var th;
        var tableObj;
        window.onload = function () {
            tableObj = document.getElementById("video-table");
            th = tableObj.clientHeight;
            console.log("th==",th);
        }
        window.onresize = function(){
            console.log("窗口大小改变");
            var bodyHeight = document.body.clientHeight;
            console.log("bodyHeight==",bodyHeight);
            if(770 < bodyHeight){
                tableObj.style.height = (th + 135) + "px";
            }
            if(bodyHeight <= 670){
                tableObj.style.height = th + "px";
            }

        }
    </script>
</body>

</html>